<template>
	<view>
		<view class="content" >
			<view class="information">
				<view>
					<view>发起人信息</view>
					<view>^</view>
				</view>
				<view>
					<view>流水号</view>
					<view>{{mymun}}</view>
				</view>
				<view>
					<view>姓名</view>
					<view>{{userdata.name}}</view>
				</view>
				<view>
					<view>部门</view>
					<view>{{userdata.department_name}}</view>
				</view>
				<view>
					<view>岗位</view>
					<view>{{userdata.post_name}}</view>
				</view>
				<view>
					<view>发起时间</view>
					<view :value="valueTime">{{valueTime}}</view>
				</view>
			</view>
			
			<view class="details">
				<view>
					<view>会议信息</view>
					<view>^</view>
				</view>
				<view>
					<view>会议标题</view>
					<input type="text" :value="title" placeholder="请输入会议标题" @change="changetitle"/>
				</view>
				<view>
					<view>会议室名称</view>
					<picker :range="room" 
					:value="index" @change="changeroom">
						<label>{{room[index]}}</label>
					</picker>
				</view>
				<view>
					<view>会议内容</view>
					<textarea @blur="changecon" auto-height :value="con"  placeholder="请输入会议内容" />
				</view>
				<view>
					<view>开会日期</view>
					<picker mode="date" :value="mydate" @change="changemydate">
						{{mydate}}
					</picker>
				</view>
				<view>
					<view>开始时间</view>
					<picker mode="time" :value="start" @change="changestart">
						{{start}}
					</picker>
				</view>
				<view>
					<view>结束时间</view>
					<picker mode="time" :value="end" @change="changeend">
						{{end}}
					</picker>
				</view>
				<view>
					<view>人数</view>
					<input type="text" :value="per" placeholder="请输入人数" @change="changeper"/>
				</view>
			</view>
		</view>
		
		<view class="footer">
			<button @click="submit">提交</button>
			<button @click="myreturn">返回</button>
		</view>
	</view>
</template>

<script>
	import clock from '../../utils/apply_leave.js'
	import http from '../../utils/http.js'
	import store from '~@/store/index.js'
	import {
		computed,
		reactive,
		toRefs,onMounted
	} from 'vue'
	export default {
		setup() {
			let data = reactive({
				room:['招待室1','招待室2','会议室1','会议室2','会议室3','会议室4','招待室123','招待室11'],
				valueTime:'',
				index:0,
				mydate:"请选择开始日期",
				start:'请选择开始时间',
				end:'请选择结束时间',
				per:'',
				con:"",
				title:"",
				userdata:store.state.liujinchang.user,
				mymun:'',
				changemydate:(v)=>{
					data.mydate=v.detail.value
				},
				changestart:(v)=>{
					data.start=v.detail.value
				},
				changeend:(v)=>{
					data.end=v.detail.value
				},
				changeroom:(v)=>{
					data.index=v.detail.value
				},
				changeper:(v)=>{
					data.per=v.detail.value
				},
				changecon:(v)=>{
					data.con=v.detail.value
				},
				changetitle:(v)=>{
					data.title=v.detail.value
				},
				submit:()=>{
					http({
						url:'/personalcenter/meeting/add',
						method:'post',
						data:{
							meeting_num:data.mymun,
							meeting_room:parseInt(data.index)+1,
							meeting_tit:data.title,
							meeting_startime:data.mydate+' '+data.start+":00",
							meeting_endtime:data.mydate+' '+data.end+":00",
							work_id:data.userdata.work_id,
							meeting_todotime:data.valueTime,
							meeting_cont:data.con,
							meeting_pernum:data.per,
							name:data.userdata.name
						}
					}).then(()=>{
						uni.showModal({
							title:'提示',
							content:'申请成功是否返回上一页',
							success:function(res){
								if(res.confirm){
									uni.navigateBack()
								}
							}
						})
					})
				},
				myreturn:()=>{
					uni.navigateBack()
				},
				setnum:()=>{
					http({
						url:'/personalcenter/meeting/addget',
						data:{workid:store.state.liujinchang.user.work_id}
					}).then((res)=>{
						data.mymun=res.data.data2
					})
				},
				autoTime:()=>{
					setInterval(()=>{
						data.valueTime=clock();
					},1000)
				},
			})
			onMounted(()=>{
				data.screenHeight=uni.getSystemInfoSync().scrollHeight
				data.autoTime();
				data.setnum();
				console.log(data.userdata)
			})
			
			return {
				...toRefs(data)
			}
		}
	}
</script>

<style scoped lang="scss">
 .header {
	 text-align: center;
	 padding: 20rpx 0;
	 background-color: #FFFFFF;
 }
 .content {
	 background-color: #F2F2F2;
	 padding: 30rpx;
	 
	 .details {
		 margin-top: 30rpx;
		 
		 text {
			 color: red;
		 }
		 // view:last-child,
		 // view:nth-of-type(7){
			//  margin-left: 45rpx;
		 // }
	 }
 }
 .information>view,.details>view {
	 margin: 0 30rpx;
	 padding: 20rpx 0;
 }
 .information>view:not(:first-child) {
	 display: flex;
	 view {
		 flex: 1;
	 }
 }
 .information>view:not(:last-child),
 .details>view:not(:last-child){
	 border-bottom: 1px solid #F6F6F6;
 }
 .information>view:not(:first-child)>view:first-child,
 .details>view:not(:first-child)>view {
 	 color: #566068;
 }
 .information>view:not(:first-child)>view:last-child,
 .details>view:not(:first-child)>input{
	 color: #999999;
 }
 .information>view:first-child,
 .details>view:first-child {
	 display: flex;
	 justify-content: space-between;
 }
 .content>view {
	 background-color: #fff;
	 border-radius: 20rpx;
 }
 .details>view:not(:first-child) {
	 display: flex;
	 view {
		 flex: 1;
	 }
	 input,textarea{
		 flex: 1;
	 }
	 picker {
		 flex: 1;
		 color: #999999;
	 }
 }
 .footer {
	 background-color: #fff;
	 display: flex;
	 justify-content: space-around;
	 padding: 20rpx 0;
	 
	 button {
		 width: 320rpx;
		 height: 80rpx;
		 line-height: 80rpx;
		 text-align: center;
		 font-weight: 300;
		 color: #fff;
		 background-color: #2D8CF0;
	 }
 }
</style>
